<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>注册页面</title>
    <!-- 引入layui样式文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.7/css/layui.min.css">
    <style>
        body {
            background-color: #f2f2f2;
        }

        .layui-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .layui-card {
            width: 400px;
            background-color: #fff;
            border: 1px solid #e6e6e6;
            border-radius: 5px;
            padding: 20px;
        }

        .layui-card-header {
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            padding-bottom: 10px;
            border-bottom: 1px solid #e6e6e6;
        }

        .layui-card-body {
            padding-top: 20px;
        }

        .layui-form-label {
            width: 80px;
            text-align: right;
            padding-right: 10px;
            font-weight: bold;
        }

        .layui-input-block {
            margin-left: 100px;
            margin-top: 10px;
        }

        .layui-input {
            width: 240px;
        }

        .layui-btn {
            margin-top: 10px;
            width: 120px;
        }

        .layui-btn-primary {
            margin-left: 10px;
        }

        .error-message {
            margin-top: 10px;
            color: red;
            text-align: center;
        }

        .error-message p {
            margin: 0;
        }
        .background-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background-image: url("https://img95.699pic.com/photo/50258/4089.jpg_wh300.jpg");
            background-repeat: no-repeat;
            background-size: cover;
            filter: blur(5px); /* 虚化效果，可以根据需要调整模糊程度 */
        }

    </style>
          </head>


<body >
<div class="background-container"></div>
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md6 layui-col-sm12 layui-col-xs12">
        <div class="layui-card">
            <div class="layui-card-header">用户注册</div>
            <div class="layui-card-body">
                <form class="layui-form" th:action="@{/regist}" method="POST" id="RegisterForm" enctype="multipart/form-data">
                    <div class="layui-form-item">
                        <label class="layui-form-label">用户名</label>
                        <div class="layui-input-block">
                            <input type="text" name="username" lay-verify="required|username" autocomplete="off" placeholder="请输入用户名" class="layui-input" required>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">密码</label>
                        <div class="layui-input-block">
                            <input type="password" name="password" lay-verify="required|pass" autocomplete="off" placeholder="请输入密码" class="layui-input" required>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">头像</label>
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn" id="upload">上传头像</button>
                            <input type="hidden" name="avatar" id="avatar" required>
                        </div>
                    </div>
                    <input type="hidden" name="avatarRoad" id="avatarRoad" />
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="submit" class="layui-btn" lay-submit lay-filter="form-demo">立即注册</button>
                            <button  class="layui-btn layui-btn-primary"><a th:href="@{/login.html}">返回登录</button>
                        </div>
                    </div>
                    <div class="error-message" id="hide" th:if="${msg}">
                        <p th:text="${msg}"></p>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>
<!-- 引入layui.js文件 -->
<script src="https://cdn.staticfile.org/layui/2.5.7/layui.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script >
    function hide(){
        document.getElementById('hide').style.display="none";
    }
    setTimeout(hide,2000);
    layui.use(['upload', 'form'], function() {
        var form = layui.form;
        var upload = layui.upload;
        var maxSize = 2048;
        var avatarRoad1='';
        function assignAvatarRoad() {
            $('#avatarRoad').val(avatarRoad1);
            console.log(avatarRoad1)

        }
        upload.render({
            elem: '#upload',
            accept: 'images', // 只允许上传图片文件
            exts: 'jpg|jpeg|png', // 允许的文件扩展名
            size: maxSize, // 文件限制大小，单位 KB
            url : 'http://localhost:8080/springboot/upload',
            field:'avatar',

            // 文件选择后的回调函数
            choose: function(obj) {
                var file = obj.pushFile(); // 获取文件对象
                // 显示文件信息
                $('#avatar').text('文件名：' + file.name + '，大小：' + (file.size / 1024).toFixed(2) + ' KB');
            },

            // 上传前的回调函数
            before: function(obj) {
                var file = obj.pushFile(); // 获取文件对象
                if (file.size > maxSize * 1024) {
                    layer.msg('文件大小不能超过 ' + maxSize + ' KB');
                    return false; // 阻止文件上传
                }
            },
            done: function(res) {
                // 上传完成的处理操作
                avatarRoad1=res.avatar;
                Promise.resolve()
                    .then(assignAvatarRoad)
                    .catch(function(error) {
                        console.error('处理avatarRoad1赋值的错误:', error);
                    });
            },
        });
        console.log(avatarRoad1);

        form.on('submit', function(event) {
            event.preventDefault();

            assignAvatarRoad();
            form.submit();
        });
    });

</script>

</script>
</body>
</html>
